<template>
  <a-modal v-bind:visible="isShowAddSubplan" width="50%" title="添加子计划" @ok="handleOk" @cancel="onCancel">
    <div class="searchStyle">
      <span> 计划日期： </span>
      <a-date-picker
        v-model="form.date"
        class="inputStyle"
        @change="dateChange"
        :allowClear="true"
        placeholder="请选择日期"
      />
      <span> 计划组数： </span>
      <a-input
        :disabled="!!form.type"
        v-model="form.num"
        class="inputStyle"
        :allowClear="true"
        placeholder="请输入计划组数"
      ></a-input>
      <span> 计划类型： </span>
      <a-select @change="selectChange" v-model="form.type" :allowClear="true" placeholder="整组" class="inputStyle">
        <a-select-option
          v-for="item in [
            { id: 1, name: '消费' },
            { id: 2, name: '还款' }
          ]"
          :key="item.id"
          :value="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
    </div>
    <div class="searchStyle">
      <div>
        <span> 最低金额：</span>
        <a-input
          v-model="form.start_amount"
          class="inputStyle"
          :allowClear="true"
          placeholder="请输入最低金额"
        ></a-input>
      </div>
      <div>
        <span> 最高金额：</span>
        <a-input
          :disabled="!!form.type"
          v-model="form.end_amount"
          class="inputStyle"
          :allowClear="true"
          placeholder="请输入最高金额"
        ></a-input>
      </div>
      <div v-if="!!form.type">
        <span> 交易时间：</span>
        <a-time-picker @change="timeChange" class="inputStyle" value-format="HH:mm:ss" />
      </div>
    </div>
    <div class="searchStyle">
      <a-button type="primary" @click="anewGet">重新生成</a-button>
      <a-button @click="del">删除最后一组计划</a-button>
      <a-button type="primary" @click="add">添加计划</a-button>
      <a-button @click="reset">重置</a-button>
    </div>
    <a-table
      :pagination="false"
      :rowKey="(record, index) => index"
      style="border: 1px solid #e8e8e8"
      :columns="columns"
      :data-source="tableData"
    >
    </a-table>
  </a-modal>
</template>

<script>
import { buildPlanItemAPI, addPlanAPI } from '@/api/transaction.js'
export default {
  name: 'AddSubplan',
  props: {
    isShowAddSubplan: {
      type: Boolean,
      default: false
    },
    addDate: {
      type: String,
      default: ''
    }
  },
  watch: {
    isShowAddSubplan(boo) {
      if (boo) {
        this.form.date = this.addDate
      } else {
        this.form = {
          brand_id: process.env.VUE_APP_BRAND_ID,
          date: '',
          trade_time: '',
          start_amount: '', // 最低金额
          end_amount: '', // 最高金额
          num: '', //计划组数
          last_trade_time: '',
          plan_id: this.$route.query.id,
          type: undefined
        }
      }
    }
  },
  data() {
    return {
      form: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        date: '',
        last_trade_time: '',
        trade_time: '',
        start_amount: '', // 最低金额
        end_amount: '', // 最高金额
        num: '', //计划组数
        plan_id: this.$route.query.id,
        type: undefined
      },
      columns: [
        {
          title: '交易日期',
          dataIndex: 'trade_time',
          align: 'center'
        },
        {
          title: '交易金额',
          dataIndex: 'trade_amount',
          align: 'center'
        },
        {
          title: '交易类型',
          dataIndex: 'trade_type_txt',
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  methods: {
    selectChange() {
      this.form.num = ''
      this.form.end_amount = ''
    },
    timeChange(time) {
      this.form.last_trade_time = `${this.form.date} ${time}`
      this.form.trade_time = `${time}`
      console.log(this.form.trade_time)
    },
    dateChange(value, date) {
      this.form.date = date
    },
    async handleOk() {
      const send = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        plan_id: this.$route.query.id,
        plan_items: [this.tableData]
      }
      try {
        await addPlanAPI(send)
        this.$emit('upload')
        this.$message.success('操作成功')
        this.$emit('update:isShowAddSubplan', false)
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    onCancel() {
      this.$emit('update:isShowAddSubplan', false)
    },
    async anewGet() {
      try {
        const result = await buildPlanItemAPI(this.form)
        console.log(result)
        this.tableData = result.data
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    async add() {
      try {
        const result = await buildPlanItemAPI(this.form)
        console.log(result)
        this.tableData = [...this.tableData, ...result.data]
        console.log(this.tableData)
      } catch (error) {
        this.$message.error(error.data.msg)
      }
    },
    del() {
      this.tableData = this.tableData.filter(
        item => item.plan_group_id !== this.tableData[this.tableData.length - 1].plan_group_id
      )
    },
    reset() {
      this.tableData = []
    },
    anew() {}
  }
}
</script>

<style lang="less" scoped>
.searchStyle {
  margin-bottom: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.inputStyle {
  margin-right: 20px;
  width: 150px;
}
</style>
